<template>
  <view class="container">
    <z-nav-bar backState='3000' @backClick='backClick' type='transparent' :titleCenter='true' title=''></z-nav-bar>
    <public-module></public-module>
    <div class="input-panel-top">
      <div class="input-panel-header">
        <h2>信息输入</h2>
        <p>请输入以下信息完成操作</p>
      </div>
      <div class="input-panel-body input-flex">
        <div class="input-fields">
          <!-- <div class="input-group">
            <label>身份证号码</label>
            <div class="input-icon-wrap">
              <input
                v-model="idCard"
                @input="formatIdCard"
                @focus="handleFocus('idCard')"
                maxlength="23"
                type="text"
                placeholder="请输入18位身份证号码"
                :readonly="false"
              />
            </div>
          </div> -->
          <div class="input-group">
            <label>手机号码</label>
            <div class="input-icon-wrap">
              <input
                v-model="phone"
                @input="formatPhone"
                @focus="handleFocus('phone')"
                maxlength="13"
                type="tel"
                placeholder="请输入11位手机号码"
                :readonly="false"
              />
            </div>
          </div>
          <!-- 数字键盘 -->
          <div class="number-keyboard">
            <div class="number-row" v-for="(row, rowIndex) in numberRows" :key="rowIndex">
              <div class="key-group" v-for="(group, groupIndex) in getGroups(row)" :key="groupIndex">
                <button v-for="num in group" :key="num" @click="handleKeyClick(num)">{{ num }}</button>
                <button v-if="rowIndex === numberRows.length - 1 && groupIndex === 2" class="delete-btn" @click="handleKeyClick('delete')">
                  <svg width="24" height="24" viewBox="0 0 24 24"><path d="M6 6l12 12M6 18L18 6" stroke="#d00" stroke-width="2" stroke-linecap="round"/></svg>
                </button>
              </div>
            </div>
          </div>
          <!-- 确定按钮 -->
          <button class="input-panel-btn" @click="onConfirm">
            确定
          </button>
        </div>
      </div>
    </div>
  </view>
</template>

<script>
import $http from '@/config/requestConfig'
export default {
	data() {
		return {
			idCard: "",//412826200305947878
			phone: "",//18162764675
			focusedInput: null, // 当前聚焦的输入框
			numberRows: [
				['1', '2', '3', '4', '5', '6'],
				['7', '8', '9', '0']
			]
		};
	},
	//第一次加载
	onLoad(e) {
		uni.hideTabBar();
		// Add auto focus for phone input
		this.$nextTick(() => {
			this.focusedInput = 'phone';
			// Find and focus the phone input element
			const phoneInput = document.querySelector('input[type="tel"]');
			if (phoneInput) {
				phoneInput.focus();
			}
		});
	},
	//页面显示
	onShow() {
		uni.hideTabBar();
	},
	//方法
	methods: {
		backClick() {
			// 处理返回事件
		},
		onConfirm() {
			const idCard = this.idCard.replace(/\s/g, "");
			const phone = this.phone.replace(/\s/g, "");
			// if (!idCard) {
			// 	uni.showToast({ title: "请输入身份证号码", icon: "none" });
			// 	return;
			// }
			// if (idCard.length !== 18) {
			// 	uni.showToast({ title: "身份证号码长度应为18位", icon: "none" });
			// 	return;
			// }
			if (!phone) {
				uni.showToast({ title: "请输入手机号码", icon: "none" });
				return;
			}
			if (phone.length !== 11) {
				uni.showToast({ title: "手机号码长度应为11位", icon: "none" });
				return;
			}
			// uni.showToast({ title: `信息验证通过！`, icon: "success" });
			this.$http.get('Person/checx', { sjh: phone }, { load: false }).then(res => {
				console.log(res.data,'res.data')
					if (!res.data) {
						uni.setStorageSync("pid",res.data)
						uni.navigateTo({
							url: `/pages/print/index_two?phone=`+phone
						});
					} else {
						uni.setStorageSync("pid",res.data)
						uni.navigateTo({
							url: `/pages/print/bumeninfo?pid=${res.data}&blqy=''`
						});
					}
				}, err => {
				
					uni.showToast({
						title:'提交失败,错误原因:'+err.errMsg,
						icon: "none"
					});
				
				});
		},
		formatIdCard(e) {
			let value = e.target.value.replace(/\s/g, "");
			if (value.length > 0) {
				value = value.match(/.{1,4}/g).join(" ");
			}
			this.idCard = value;
		},
		formatPhone(e) {
			let value = e.target.value.replace(/\s/g, "");
			if (value.length > 3) {
				value = value.substring(0, 3) + " " + value.substring(3);
			}
			if (value.length > 8) {
				value = value.substring(0, 8) + " " + value.substring(8);
			}
			this.phone = value;
		},
		handleFocus(inputName) {
			this.focusedInput = inputName;
		},
		handleKeyClick(key) {
			if (!this.focusedInput) return;
			let value = this[this.focusedInput].replace(/\s/g, "");
			if (key === 'delete') {
				value = value.slice(0, -1);
			} else {
				// 限制最大长度
				if (this.focusedInput === 'idCard' && value.length >= 18) return;
				if (this.focusedInput === 'phone' && value.length >= 11) return;
				value += key;
			}
			// 赋值并格式化
			if (this.focusedInput === 'idCard') {
				this.formatIdCard({ target: { value } });
			} else if (this.focusedInput === 'phone') {
				this.formatPhone({ target: { value } });
			}
		},
		getGroups(row) {
			// 每两个为一组
			const groups = [];
			for (let i = 0; i < row.length; i += 2) {
				groups.push(row.slice(i, i + 2));
			}
			// 最后一行补一个空组用于放删除键
			if (row.length < 6) {
				while (groups.length < 3) groups.push([]);
			}
			return groups;
		},
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//页面下来刷新
	onPullDownRefresh() {},
	//页面上拉触底
	onReachBottom() {},
	//用户点击分享
	onShareAppMessage(e) {
		
	}
};
</script>

<style scoped>
.input-panel-top {
	width: 100%;
	margin: 0 auto;
	background: #fff;
	border-radius: 0;
	box-shadow: none;
	padding-bottom: 32px;
	height: 100vh;
	
}
.input-panel-header {
	background: linear-gradient(135deg, #165DFF 0%, #4080FF 50%, #6AA1FF 100%);
	color: #fff;
	text-align: center;
	padding: 12px 24px 18px 24px;
	
}
.input-panel-header h2 {
	font-size: 4vh;
	font-weight: bold;
	margin-bottom: 6px;
	letter-spacing: 1px;
}
.input-panel-header p {
	font-size: 3vh;
	opacity: 0.95;
}
.input-panel-body {
	padding: 28px 24px 0 24px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.input-group label {
	font-size: 4vh;
	color: #5e5e5e;
	font-weight: 500;
	margin-bottom: 7px;
	display: block;
}

.input-icon-wrap input {
	width: 100%;
	padding: 0px 120rpx 0px 80rpx;
	border: 1.5px solid #e5e7ef;
	border-radius: 8px;
	height: 60px;
	font-size: 4vh;
	background: #f8faff;
	transition: border 0.2s, box-shadow 0.2s;
	outline: none;
}
.input-icon-wrap input:focus {
	border: 1.5px solid #165DFF;
	box-shadow: 0 0 0 2px #165dff22;
	background: #fff;
}
.input-panel-btn {
	width: 100%;
	background: linear-gradient(90deg, #165DFF 0%, #4080FF 100%);
	color: #fff;
	font-size: 2.5vh;
	font-weight: bold;
	border: none;
	border-radius: 8px;
	margin-top: 18px;
	box-shadow: 0 4px 16px 0 rgba(22, 93, 255, 0.10);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: box-shadow 0.2s, transform 0.2s;
}
.input-panel-btn:hover {
	/* box-shadow: 0 8px 24px 0 rgba(22, 93, 255, 0.18);
	transform: translateY(-2px) scale(1.01); */
}
.input-flex {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 32px;
}
.input-fields {
	flex: 1;
}
.number-keyboard {
	width: 100%;
	background: #f5f7fa;
	border-radius: 12px;
	padding: 18px 16px 12px 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 24px 0 12px 0;
	box-shadow: 0 2px 8px #0001;
}
.number-row {
	display: flex;
	justify-content: space-between;
	gap: 0;
	margin-bottom: 0;
}
.key-group {
	display: flex;
	gap: 12px;
	flex: 1;
	justify-content: center;
}
.key-group:not(:last-child) {
	margin-right: 120px;
}
.number-keyboard button {
	flex: 1 1 0;
	min-width: 0;
	width: 48px;
	height: 48px;
	line-height: 48px;
	font-size: 22px;
	background: #fff;
	border: 1px solid #e5e7ef;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.2s;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.delete-btn {
	background: #fff;
	color: #d00;
	font-weight: bold;
	border: 1px solid #e5e7ef;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
